<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
    padding:0;
    margin:0;
    }
    body{
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    }
    .wrap{
      width: 200px;
      height: 200px;
      margin: auto;
      background-color: #bfc;
    }
    input{
      margin-left: 12px;
      margin-top: 20px;
    }
    .tempDiv {
      border:1px dashed blue;
  background:#5a72f8;
  position:absolute;
  width:0;
  height:0;
  opacity:0.1;
    }
  </style>
</head>
<body>
<div class="wrap">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <br/>
   <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
</div>
</body>
<script type = "text/javascript">
  window.onload = function(){
   document.addEventListener('mousedown',function(e){
   var posx = e.clientX;
   var posy = e.clientY;
   var div = document.createElement("div");
   //设置加入元素的位置
   div.className = "tempDiv";
   div.style.left = e.clientX+"px";
   div.style.top = e.clientY+"px";
   document.body.appendChild(div);
   //当鼠标移动时
   document.onmousemove = function(ev){
     //设置加入元素的样式属性
    div.style.left = Math.min(ev.clientX, posx) + "px";
    div.style.top = Math.min(ev.clientY, posy) + "px";
    div.style.width = Math.abs(posx - ev.clientX)+"px";
    div.style.height = Math.abs(posy - ev.clientY)+"px";
    let w1 = parseInt(div.style.left)//框选区域的左边距值
    let h1 = parseInt(div.style.top )//框选区域的上边距值
    let w2 = parseInt(div.style.width)//框选区域的宽度
    let h2 = parseInt(div.style.height)//框选区域的高度
    var checkItems = document.getElementsByTagName("input")
    for(let i=0;i<checkItems.length;i++)
    {
      let item = checkItems[i]
      // console.log(item.checked)
      let w3 = item.offsetLeft+item.clientWidth //控件最大横坐标
      let h3 = item.offsetTop+item.clientHeight //控件最大纵坐标
      if(w1<w3 && h1<h3 && h1+h2 > item.offsetTop && w1+w2>item.offsetLeft)
      {
        item.checked  = true
      }
    }
    //当鼠标松开时
    document.onmouseup = function(){
     let div  = document.getElementsByClassName("tempDiv")[0]
     div.parentNode.removeChild(div);
      document.onmousemove = null;
    }
   }},false) 
  
  }
  
</script>
</html>